<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <title>预约寄养</title>
    <!--<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">-->
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="stylesheet" href="/stylesheets/xiuxiu.css">
    <link href="/datepicker/bootstrap-datetimepicker.css" rel="stylesheet"/>
    <style>
        .mypet_list:hover{
            box-shadow:3px 3px 8px #575757;
        }
        #addpet_info,#check_info,.addpet_cursor{
            display: inline-block;
            cursor: pointer;
            color: red;
        }
    </style>
</head>
<body style="background-color: #e2e2e2">
<%include nav.html%>
<div class="reservation_container">
    <div class="reservation_content">
        <nav class="jy_nav">
            预约寄养
        </nav>
        <!--选择宠物模态窗-->
        <div class="modal_address" id="modal_getpet">
            <div class="modal_inner scrollbar">
                <div class="modal_header">
                    <div class="header_info">请选择您要寄养的宠物</div>
                    <div class="header_close">
                        <div onclick="getpet()" class="addpet_cursor">
                            <img src="/images/close.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="modal_content" id="getpet_list">
                    <%
                    for(var i in pet){
                    %>
                    <div class="mypet_list"  id="<%=pet[i].petno%>">
                        <div class="mypet_list_header" style="background-color: #c4c4c4">
                            <p>编号：<%=pet[i].petno%></p>
                        </div>
                        <div class="mypet_list_content">
                            <div class="list_left">
                                <img src="/pets/<%=pet[i].varietieno%>.jpg" alt="">
                            </div>
                            <div class="list_right">
                                <div class="list_info1">
                                    名字：<%=pet[i].varietiename%>
                                </div>
                                <div class="list_info1">
                                    宠物简介：<%=pet[i].sketch%>
                                </div>
                            </div>
                        </div>
                    </div>
                    <%}%>
                </div>
            </div>
        </div>

        <!--添加宠物模态窗-->
        <div class="modal_address" id="modal_addpet">
            <div class="modal_inner scrollbar">
                <div class="modal_header">
                    <div class="header_info" >
                        添加宠物
                    </div>
                    <div class="header_close">
                        <div onclick="addpet()" class="addpet_cursor">
                            <img src="/images/close.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="modal_content">
                    <form id="pet-form"  role="form" method="post">
                        <div class="modal_row">
                            <div class="modal_col1">宠物类型:</div>
                            <div class="modal_col2" id="pet_varietie">
                                <select id="mySelect0">
                                    <option value="0">请选择宠物分类</option>
                                </select>
                                <select id="mySelect1">
                                    <option value="0">请选择宠物品种</option>
                                </select>
                                <input type="text" name="varietie" id="varietie">
                            </div>
                        </div>
                        <div class="modal_row">
                            <div class="modal_col1">性别:</div>
                            <div class="modal_col2">
                                <input name="sex" type="radio" value="1" required>♂男生
                                <input name="sex" type="radio" value="2" required>♀女生
                            </div>
                        </div>
                        <div class="modal_row">
                            <div class="modal_col1">是否绝育:</div>
                            <div class="modal_col2">
                                <input type="radio" name="sterilization" required>是
                                <input type="radio" name="sterilization" required>否
                            </div>
                        </div>
                        <div class="modal_row">
                            <div class="modal_col1">生日:</div>
                            <div class="modal_col2">
                                <select id="mySelect2">
                                    <option value="">请选择</option><option value="2016">2016</option><option value="2015">2015</option><option value="2014">2014</option><option value="2013">2013</option><option value="2012">2012</option><option value="2011">2011</option><option value="2010">2010</option><option value="2009">2009</option><option value="2008">2008</option><option value="2007">2007</option><option value="2006">2006</option><option value="2005">2005</option><option value="2004">2004</option><option value="2003">2003</option><option value="2002">2002</option><option value="2001">2001</option><option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option><option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option><option value="1979">1979</option><option value="1978">1978</option><option value="1977">1977</option><option value="1976">1976</option><option value="1975">1975</option><option value="1974">1974</option><option value="1973">1973</option><option value="1972">1972</option><option value="1971">1971</option><option value="1970">1970</option><option value="1969">1969</option><option value="1968">1968</option><option value="1967">1967</option><option value="1966">1966</option><option value="1965">1965</option><option value="1964">1964</option><option value="1963">1963</option><option value="1962">1962</option><option value="1961">1961</option><option value="1960">1960</option><option value="1959">1959</option><option value="1958">1958</option><option value="1957">1957</option><option value="1956">1956</option><option value="1955">1955</option><option value="1954">1954</option><option value="1953">1953</option><option value="1952">1952
                                </option>
                                </select>年
                                <input type="text" hidden name="year" id="year">
                                <select id="mySelect3">
                                    <option value="">请选择</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12
                                </option>
                                </select>月
                                <input type="text" hidden name="month" id="month">
                                <select  id="mySelect4">
                                    <option value="">请选择</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12
                                </option></option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24
                                </option><option value="25"2>5</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31
                                </select>日
                                <input type="text" hidden name="day" id="day">
                            </div>
                        </div>
                        <div class="modal_row">
                            <div class="modal_col1">体重:</div>
                            <div class="modal_col2">
                                <input type="text" name="weight">公斤(kg)
                            </div>
                        </div>
                        <div class="modal_row" style="min-height:200px">
                            <div class="modal_col1">宠物简介:</div>
                            <div class="modal_col2">
                                <textarea placeholder="宠物简介描述" required></textarea>
                            </div>
                        </div>
                        <div class="modal_row">
                            <div class="modal_col1">&nbsp;</div>
                            <div class="modal_col2">
                                <button type="submit" class="btn btn-default">保存</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <form id="foster-form" method="post">
            <!-- 提交宠物编号-->
            <input type="text" hidden id="petno" name="petno">
            <!-- 提交地址-->
            <input type="text" hidden id="address"  name="needsaddress">
            <!-- 提交服务金额-->
            <input type="text" hidden id="service"  name="needservice" value="0">
            <!-- 提交交易金额-->
            <input type="text" hidden id="price"  name="price" value="0">
            <div class="reserver">
                <div class="reserver_header">
                    请选择寄养时间:
                </div>
                <div class="reserver_center">
                    <div id="addpet_date">
                        <div class="col-xs-6 col-sm-1 col-md-1" style="font-size: 1.8rem">start：</div>
                        <div class="col-xs-6 col-sm-3 col-md-2"><input class="form_datetime form-control" id="addpet_date1" type="text" value="2016-01-01" name="date1"></div>
                        <div class="col-xs-6 col-sm-1 col-md-1" style="font-size: 1.8rem">end：</div>
                        <div class="col-xs-6 col-sm-3 col-md-2"><input class="form_datetime form-control" id="addpet_date2" type="text" value="2016-01-01" name="date2"></div>
                    </div>
                </div>
            </div>
            <div class="reserver">
                <div class="reserver_header">
                    选择要寄养宠物:
                </div>
                <div class="reserver_center">
                    <div class="reservation_addpet" >
                        <div class="addpet_cursor" onclick=getpet();>
                            <img src="/images/add2.png" alt="" class="big_icon" id="addpet_icon">
                        </div>
                        <div id="addpet_info" onclick="addpet()"></div>
                    </div>
                    <div class="reservation_pet">
                        <span>40</span>&nbsp;元/晚
                    </div>
                    <div class="reservation_pet">
                        <span id="addpet_night">1</span>&nbsp;晚
                    </div>
                    <div class="reservation_pet">
                        金额 &nbsp;<span id="addpet_price">40.00</span>
                    </div>
                </div>
            </div>
            <div class="reserver">
                <div class="reserver_header">
                    选择其他服务:
                </div>
                <div class="reserver_center">
                    <div class="reservation_addpet">
                        <img src="/images/car2.png" alt="" class="big_icon">
                        接/送
                    </div>
                    <div class="reservation_pet">
                        <span>15</span>&nbsp;元/次
                    </div>
                    <div class="reservation_pet">
                        <div class="add_mul">
                            <button id="btn1">-</button>
                            <input type="text"  id="addpet_times" value="0" style="width: 40px;height: 40px">
                            <button id="btn2">+</button>
                        </div>
                    </div>
                    <div class="reservation_pet">
                        <span id="addpet_service">0</span>&nbsp;元
                    </div>
                </div>
            </div>
            <div class="reserver">
                <div class="reserver_header">
                    收货人地址：
                </div>
                <div class="reserver_center" id="province">
                    <select class="sel_pro">
                    </select>
                    <select class="sel_city">
                    </select>
                    <select class="sel_street">
                    </select>
                </div>
            </div>
            <div class="reserver">
                <div class="reserver_header">
                    寄养家庭留言:
                </div>
                <div class="reserver_center">
                    <textarea id="txt"  placeholder="输入给寄养家庭留言" name="needscontent"></textarea>
                </div>
            </div>
            <div class="reserver">
                <div class="reserver_header">
                    &nbsp;
                </div>
                <div class="reserver_center">
                    <input type="checkbox" id="addpet_check">
                    同意双方寄养服务协议
                </div>
            </div>
            <div class="reserver">
                <div class="reserver_header">

                </div>
                <div class="reserver_center">
                    总金额：
                    <span id="total_price">40</span>&nbsp;元
                    &nbsp;&nbsp;&nbsp;
                    <div id="check_info"></div>
                </div>
            </div>
            <div class="reserver">
                <div class="reserver_header">
                    &nbsp;
                </div>
                <div class="reserver_center">
                    <button type="submit" value="submit" class="btn_submit" id="place_order" >提交订单</button>
                </div>
            </div>
        </form>
    </div>
    <div style="height: 50px"></div>
    <%include footer.html%>
</div>
<script type="text/javascript" src="/javascripts/rq/jquery-1.8.3.js"></script>
<script type="text/javascript" src="/javascripts/rq/jquery-ui-1.9.2.custom.js"></script>
<script type="text/javascript" src="/javascripts/rq/share.js"></script>
<script src="/javascripts/three-sports.js"></script>
<script src="/javascripts/two-sports.js"></script>
<script src="/datepicker/bootstrap-datetimepicker.js"></script>
<script src="/datepicker/bootstrap-datetimepicker.zh-CN.js"></script>
<script>
    $(".form_datetime").datetimepicker({
        format: "yyyy-mm-dd",
        autoclose: true,
        todayBtn: true,
        todayHighlight: true,
        showMeridian: true,
        pickerPosition: "bottom-left",
        language: 'zh-CN',//中文，需要引用zh-CN.js包
        startView: 2,//月视图
        minView: 2//日期时间选择器所能够提供的最精确的时间选择视图
    });
</script>
<script>
    $(function () {
        $('#varietie').val('中国狸花猫');
        $('#varietie').css('display','none');
        $('#pet_varietie').change(function(){
            $('#varietie').val(getIndex('mySelect1'));
        });
        $('#mySelect2').change(function(){
            $('#year').val(getIndex('mySelect2'));
        });
        $('#mySelect3').change(function(){
            $('#month').val(getIndex('mySelect3'));
        });
        $('#mySelect4').change(function(){
            $('#day').val(getIndex('mySelect4'));
        });
        $('#pet-form').submit(function () {
            $.ajax({
                type: 'POST',
                url: '/pet/addpet',
                data:$('#pet-form').serialize(),
                dataType:'json',
                success: function (data) {
                    if(data.res=="1"){
                        location.href='/users/buy';
                    }
                },
                error: function (data) {
                    alert(data);
                }
            });
            return false;
        });
        if($('#getpet_list').children().length==0){
            $('#addpet_info').html('现在就去添加宠物！');
        }
        $('#addpet_date').change(function(){
            var date1=new Date($('#addpet_date1').val());
            var date2=new Date($('#addpet_date2').val());
            if(date2-date1>=0){
                $('#addpet_night').html(
                        (date2-date1)/(24 * 60 * 60 * 1000)+1
                );
                $('#addpet_price').html(((date2-date1)/(24 * 60 * 60 * 1000)+1)*40);
                total_price();
            }else{
                return false;
            }
        });
        $('#getpet_list').children().click(function () {
            $('#petno').val(this.id);
            $('#addpet_icon').attr('src',$(this).find('img')[0].src);
            $('#addpet_info').html('no:'+this.id);
            getpet();
        });
        $('#btn1').click(function () {
            var num=parseInt($('.add_mul input').val());
            if($('.add_mul input').val()==0){
                return false;
            }else{
                $('.add_mul input').val(num-1);
                $('#addpet_service').html((num-1)*15);
                total_price();
                return false;
            }
        });
        $('#btn2').click(function () {
            var num=parseInt($('.add_mul input').val());
            $('.add_mul input').val(num+1);
            $('#addpet_service').html((num+1)*15);
            total_price();
            return false;
        });
        $('#foster-form').submit(function () {
            var date=new Date().setHours(8,0,0,0);
            var date1=new Date($('#addpet_date1').val());
            var date2=new Date($('#addpet_date2').val());
            if($('#addpet_check').attr('checked')){
                if(date1-date>=0){
                    if(date2-date1>=0){
                        if($('#petno').val()==''){
                            $('#check_info').html('请选择要寄养的宠物');
                            return false;
                        }else{}
                    }else{

                        $('#check_info').html('寄养时间至少1晚');
                        return false;
                    }
                }else{

                    $('#check_info').html('请选择正确的时间');

                    return false;
                }
            }else{

                $('#check_info').html('请同意双方寄养服务协议');

                return false;
            }
            $('#service').val(parseInt($('#addpet_service').html()));
            $('#price').val(parseInt($('#total_price').html()));
            if($('.sel_city:visible').val()==undefined){
                $('#address').val(
                        $('.sel_pro:visible').val()+$('.sel_street:visible').val()
                );
            }else{
                $('#address').val(
                        $('.sel_pro:visible').val()+$('.sel_city:visible').val()+$('.sel_street:visible').val()
                );
            }
            $.ajax({
                type: 'POST',
                url: '/foster/addfoster',
                data:$(this).serialize(),
                dataType:'json',
                success: function (data) {
                    if(data.res=="1"){
                        location.href='/order';
                    }
                },
                error: function (data) {
                    alert(data);
                }
            });
            return false;
        })
    });


    function addpet(){
        var e1 = document.getElementById('modal_addpet');
        e1.style.visibility =  (e1.style.visibility == "visible"  ) ? "hidden" : "visible";
    }
    function getpet(){
        var e2 = document.getElementById('modal_getpet');
        e2.style.visibility =  (e2.style.visibility == "visible"  ) ? "hidden" : "visible";
    }
    function total_price(){
        $('#total_price').html(parseInt($('#addpet_price').html())+parseInt($('#addpet_service').html()));
    }
    function getIndex(id)
    {
        //从document对象中，获取select标签
        var a=document.getElementById(id);
        //select标签获取的值其实是一个数组--a.options[]; 然后，选定项的下标是--a.selectedIndex
        var b=a.options[a.selectedIndex].value;
        return b;
    }
</script>

</body>
</html>
